import { Component } from "react";
import {
  View,
  ScrollView,
  Button,
  Input,
  Image,
  Swiper,
  SwiperItem,
  Text,
} from "@tarojs/components";
import { observer, inject } from "mobx-react";
import Taro from "@tarojs/taro";

import fl_top from "@/assets/fl_top.png";
import banner1 from "@/assets/banner.png";
import banner2 from "@/assets/banner-1.png";
import banner3 from "@/assets/banner-2.png";
import banner4 from "@/assets/banner-3.png";
import banner5 from "@/assets/banner-4.png";

import "./index.scss";
@inject("store")
@observer
class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      searchinp: "",
      // navlist: [
      //   {
      //     id: 100,
      //     title: "推荐",
      //   },
      //   {
      //     id: 111,
      //     title: "女装",
      //   },
      //   {
      //     id: 222,
      //     title: "汽车",
      //   },
      //   {
      //     id: 333,
      //     title: "家电",
      //   },
      //   {
      //     id: 444,
      //     title: "鞋类",
      //   },
      //   {
      //     id: 555,
      //     title: "潮服",
      //   },
      //   {
      //     id: 666,
      //     title: "美妆",
      //   },
      //   {
      //     id: 777,
      //     title: "箱包",
      //   },
      //   {
      //     id: 888,
      //     title: "手表",
      //   },
      //   {
      //     id: 999,
      //     title: "配饰",
      //   },
      //   {
      //     id: 101,
      //     title: "家居",
      //   },
      //   {
      //     id: 102,
      //     title: "数码",
      //   },
      //   {
      //     id: 103,
      //     title: "潮玩",
      //   },
      //   {
      //     id: 104,
      //     title: "艺术",
      //   },
      // ],
      bannerlist: [banner1, banner2, banner3, banner4, banner5],
      navid: 6666666,
      shopp: [],
      shoppnum: 0,
    };
  }
  componentWillMount() {}
 
  getGoodList(id) {
    let { goodStore } = this.props.store;
    let ele;
    if (!id === 6666666) {
      ele = {};
    } else {
      ele = { categoryId: id };
    }
    console.log("ele", ele);
    goodStore.getGoodList(ele);
  }
  componentDidMount() {
    // console.log(this.props.store.goodStore);
    let { goodStore } = this.props.store;
    goodStore.getGoodList();
    goodStore.getGoodCate();
  }
 clickshoppItem = (e)=>{
   const id = e.currentTarget.dataset.id
   Taro.navigateTo({
     url:'../shopDetail/shopDetail?id='+id,
     success(res){
       console.log(res);
     }
   })
 }
  randerShopp = () => {
    let { goodStore } = this.props.store;
    let arr = [];
    let shoplist = goodStore.goodlist;
    arr.length = goodStore.goodmapnum;
    return arr.fill(1).map((item, index) => {
      if (shoplist.length > 0) {
        // console.log("index==", index);
        return (
          <View class="row">
            <View
              class="col col1"
              data-id={
                shoplist[(index + 1) * 2 - 2] &&
                shoplist[(index + 1) * 2 - 2].shoppId
              }
              onClick={(e)=>this.clickshoppItem(e)}
            >
              <View class="img">
                <Image
                  mode="aspectFit"
                  src={
                    shoplist[(index + 1) * 2 - 2] &&
                    shoplist[(index + 1) * 2 - 2].imgUrl
                  }
                />
              </View>
              <View class="txt_wrap">
                <View class="txt">
                  {shoplist[(index + 1) * 2 - 2] &&
                    shoplist[(index + 1) * 2 - 2].title}
                </View>
                <View class="price">
                  <Text class="price_left">
                    ￥
                    {shoplist[(index + 1) * 2 - 2] &&
                      shoplist[(index + 1) * 2 - 2].price / 100}
                  </Text>
                  <Text class="price_right">
                    {shoplist[(index + 1) * 2 - 2] &&
                      shoplist[(index + 1) * 2 - 2].soldNum + "已付款"}
                  </Text>
                </View>
              </View>
            </View>
            <View
              class="col col2"
              data-id={
                shoplist[(index + 1) * 2 - 1] &&
                shoplist[(index + 1) * 2 - 1].shoppId
              }
              onClick={(e)=>this.clickshoppItem(e)}
            >
              <View class="img">
                <Image
                  mode="aspectFit"
                  src={
                    shoplist[(index + 1) * 2 - 1] &&
                    shoplist[(index + 1) * 2 - 1].imgUrl
                  }
                />
              </View>
              <View class="txt_wrap">
                <View class="txt">
                  {shoplist[(index + 1) * 2 - 1] &&
                    shoplist[(index + 1) * 2 - 1].title}
                </View>
                <View class="price">
                  <Text class="price_left">
                    ￥
                    {shoplist[(index + 1) * 2 - 1] &&
                      shoplist[(index + 1) * 2 - 1].price / 100}
                  </Text>
                  <Text class="price_right">
                    {shoplist[(index + 1) * 2 - 1] &&
                      shoplist[(index + 1) * 2 - 1].soldNum + "已付款"}
                  </Text>
                </View>
              </View>
            </View>
          </View>
        );
      }
    });
  };
  changeCate(e) {
    let id = parseInt(e.target.dataset.id);
    this.setState({ navid: id });
    this.getGoodList(id);
  }
  randerCate = () => {
    let { goodStore } = this.props.store;

    return (
      goodStore.goodcate.length > 0 &&
      goodStore.goodcate.map((item) => {
        // console.log(item);
        return (
          <View
            key={item._id}
            class={`navitem ${item.id == this.state.navid ? "active" : ""}`}
            data-id={item.id}
            id={"a" + item.id}
            onClick={(e) => this.changeCate(e)}
          >{item.title}</View>
        );
      })
    );
  };

  render() {
    const { searchinp, navlist, navid, bannerlist } = this.state;
    return (
      <ScrollView
        className="container"
        enhanced
        show-scrollbar={false}
        scroll-y
      >
        <View className="header">
          <View className="search">
            <Input
              type="text"
              placeholder="搜索单品"
              confirmType="search"
              value={searchinp}
            />
            <Image
              src={fl_top}
              className="search_icon"
              bindtap="searchtocate"
            />
          </View>
          <View className="nav_list">
            <ScrollView
              className="top_nav"
              scrollIntoView={"a" + navid}
              scrollX
              enable-flex
            >
              {this.randerCate()}
            </ScrollView>
          </View>
        </View>
        <View className="main">
          <View className="banner">
            <Swiper
              indicator-dots
              indicator-color="#fff"
              indicator-active-color="#999"
              autoplay
              circular
            >
              {bannerlist.map((item) => {
                return (
                  <SwiperItem key={item}>
                    <Image src={item}></Image>
                  </SwiperItem>
                );
              })}
            </Swiper>
          </View>
          <View class="list">{this.randerShopp()}</View>
        </View>
      </ScrollView>
    );
  }
}

export default Index;
